<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>请叫我【刘爱荣】</title>
		<link rel="stylesheet" href="../layui/css/layui.css">
	</head>
	<body>
		<ul class="layui-nav">
			<li class="layui-nav-item">
				<a href="">控制台<span class="layui-badge">9</span></a>
			</li>
			<li class="layui-nav-item">
				<a href="">个人中心<span class="layui-badge-dot"></span></a>
			</li>
			<li class="layui-nav-item">
				<a href=""><img src="../layui/images/icon/icon_face.png" class="layui-nav-img">请叫我【刘爱荣】</a>
				<dl class="layui-nav-child">
					<dd><a href="javascript:;">修改信息</a></dd>
					<dd><a href="javascript:;">安全管理</a></dd>
					<dd><a href="javascript:;">退了</a></dd>
				</dl>
			</li>
		</ul>

		<!-- <fieldset class="layui-elem-field">
			<legend>字段集区块 - 默认风格</legend>
			<div class="layui-field-box">
				内容区域
			</div>
		</fieldset>
		<blockquote class="layui-elem-quote">这个地方预留给美丽做备忘录的！</blockquote> -->
		<div class="layui-progress layui-progress-big" lay-showPercent="yes">
			<div class="layui-progress-bar layui-bg-green" lay-percent="50%"></div>
		</div>
		<div class="layui-container">
			<blockquote class="layui-elem-quote">这个地方预留给【刘美丽】做任务提醒的！</blockquote>
			<div class="layui-row">
				<div class="layui-col-md9">
					<!-- 基础按钮 -->
					<button type="button" class="layui-btn">一个标准的按钮</button>
					<a href="http://www.ctnrs.com" class="layui-btn">一个可跳转的按钮</a>
					<div class="layui-btn">一个按钮</div>
					<!-- 不同主题按钮 --> <br>
					<button type="button" class="layui-btn layui-btn-primary">原始按钮</button>
					<button type="button" class="layui-btn">默认按钮</button>
					<button type="button" class="layui-btn layui-btn-normal">百搭按钮</button>
					<button type="button" class="layui-btn layui-btn-warm">暖色按钮</button>
					<button type="button" class="layui-btn layui-btn-danger">警告按钮</button>
					<button type="button" class="layui-btn layui-btn-disabled">禁用按钮</button>
					<!-- 按钮尺寸 --> <br>
					<button type="button" class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
					<button type="button" class="layui-btn layui-btn-primary">默认按钮</button>
					<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
					<button type="button" class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
					<!-- 圆角按钮 --> <br>
					<button type="button" class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
					<button type="button" class="layui-btn layui-btn-radius">默认按钮</button>
					<button type="button" class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
					<button type="button" class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
					<button type="button" class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
					<button type="button" class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>

					<!-- 图标按钮 --> <br>
					<button type="button" class="layui-btn">
						<i class="layui-icon layui-icon-addition">增加</i>
					</button>
					<button type="button" class="layui-btn">
						<i class="layui-icon layui-icon-subtraction">删除</i>
					</button>

					<div class="layui-progress layui-progress-big" lay-showPercent="true">
						<div class="layui-progress-bar layui-bg-blue" lay-percent="80%"></div>
					</div>
				</div>
				<!-- <div class="layui-col-md3" style="background-color: orange;"> -->
				<div class="layui-col-md3">
					<button type="button" class="layui-btn" id="upload_excel">
						<i class="layui-icon">&#xe67c;</i>上传图片
					</button>
					<div class="layui-form-item">
						<label class="layui-form-label">户籍</label>
						<div class="layui-input-block">
							<select name="city" lay-verify="required">
								<option value=""></option>
								<option value="0">北京</option>
								<option value="1">上海</option>
								<option value="2">广州</option>
								<option value="3">深圳</option>
								<option value="4">杭州</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">兴趣爱好</label>
						<div class="layui-input-block">
							<input type="checkbox" name="like[write]" title="写作">
							<input type="checkbox" name="like[read]" title="阅读" checked>
							<input type="checkbox" name="like[dai]" title="发呆">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">账号是否启用</label>
						<div class="layui-input-block">
							<input type="checkbox" name="switch" lay-skin="switch">
						</div>
					</div>
					<form action="" class="layui-form">
						<div class="layui-form-item">
							<label class="layui-form-label">标签区域</label>
							<div class="layui-input-block">
								表单元素区域
							</div>
						</div>
					</form>

				</div>
			</div>
		</div>
		<!-- 你的HTML代码 -->
		<script src="../layui/layui.js"></script>
		<script src="../layui/lay/modules/element.js"></script>
		<script>
			// 页面加载完之后的渲染动作
			layui.use(['layer', 'form'], function() {
				var layer = layui.layer,
					form = layui.form;
				layer.msg('Hello World');
			});

			// form表单的动作绑定
			layui.use('form', function() {
				var form = layui.form;
				//监听提交
				form.on('submit(formDemo)', function(data) {
					layer.msg(JSON.stringify(data.field));
					return false;
				});
			});

			// 上传按钮的动作绑定
			layui.use('upload', function() {
				var upload = layui.upload;
				//执行实例
				var uploadInst = upload.render({
					// 绑定元素
					elem: '#upload_excel',
					// 上传接口
					url: '/upload/',
					done: function(res) {
						// 上传完毕回调
					},
					error: function() {
						// 请求异常回调
					}
				});
			});
		</script>
	</body>
</html>